<template>
	<a-modal v-model="showModal" @ok="confirmOk" @cancel="cancel" :title="titles" width="70%">
		<a-spin :spinning="loading">
			<a-form :form="form">
				<a-row :gutter="[24, 0]">
					<a-col :span="8">
						<a-form-item class="mb-15" label="优惠券名称" :label-col="labelCol" :wrapper-col="wrapperCol">
							<a-input placeholder="请输入" v-decorator="[
                  'name',
                  {
                    rules: [{ required: true, message: '请输入', whitespace: true }]
                  }
                ]" maxLength="30"></a-input>
						</a-form-item>
					</a-col>

					<a-col :span="8">
						<a-form-item class="mb-15" label="发放总量" :label-col="labelCol" :wrapper-col="wrapperCol">
							<a-input placeholder="请输入" v-decorator="[
					        'totalCount',
					        {
					          rules: [{ required: true, message: '请输入' }]
					        }
					      ]" maxLength="30"></a-input>
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item class="mb-15" label="优惠券类型" :label-col="labelCol" :wrapper-col="wrapperCol">
							<a-select v-decorator="[
                  'type',
]">
								<a-select-option :value="1">商城券</a-select-option>
								<a-select-option :value="2">服务券</a-select-option>
								<a-select-option :value="3">门店券</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="[24, 0]">
					<a-col :span="24">
						<a-form-item class="mb-15" label="优惠类型" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
							<div>
								<a-radio-group @change="onChangediscountType" v-decorator="[
                  'discountType',
]">
									<a-radio :style="radioStyle" :value="1">
										<div class="coupon">
											<div class="ml-10 mr-10">满减</div>
											<div class="ml-10">
												满
												<a-input placeholder="请输入" class="input" v-decorator="['usePrice']" />
												元
											</div>
											<div class="ml-10">
												减
												<a-input placeholder="请输入" class="input"
													v-decorator="['discountPrice']" />
												元
											</div>
										</div>
									</a-radio>
									<a-radio :style="radioStyle" :value="2">
										<div class="coupon">
											<div class="ml-10 mr-10">折扣</div>
											<div class="ml-10">
												满
												<a-input placeholder="请输入" class="input" v-decorator="['usePrice1']" />
												元
											</div>
											<div class="ml-10">
												折扣比例
												<a-input placeholder="请输入" class="input"
													v-decorator="['discountPercent']" />
												折，折扣上限
												<a-input placeholder="请输入" class="input"
													v-decorator="['discountLimitPrice']" />
												元
											</div>
										</div>
									</a-radio>
									<a-radio :style="radioStyle" :value="3">
										<div class="coupon">
											<div class="ml-10 mr-10">现金</div>
											<div class="ml-10">
												满
												<a-input placeholder="请输入" class="input" v-decorator="['usePrice2']" />
												元
											</div>
											<div class="ml-10">
												减
												<a-input placeholder="请输入" class="input"
													v-decorator="['discountPrice1']" />
												元
											</div>
										</div>
									</a-radio>
								</a-radio-group>
							</div>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="[24, 0]">
					<a-col :span="12">
						<a-form-item class="mb-15" label="使用有效期" :label-col="labelCol" :wrapper-col="wrapperCol">
							<div style="display: flex;">
								<a-range-picker @change="onChange" :format="['YYYY-MM-DD','YYYY-MM-DD']" v-decorator="[
                    'time', {
                      rules: [{ required: true, message: '请输入', whitespace: true,type:'array' }]
                    }
                  ]" />
							</div>
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item class="mb-15" label="限领张数" :label-col="labelCol" :wrapper-col="wrapperCol">
							<div style="display:flex">
								<a-input placeholder="请输入" v-decorator="[
                    'takeLimitCount',
                    {
                      rules: [{ required: true, message: '请输入'}]
                    }
                  ]" maxLength="30"></a-input>
							</div>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="[24, 0]">
					<a-col :span="12">
						<a-form-item class="mb-15" label="第几天开始领取" :label-col="labelCol" :wrapper-col="wrapperCol">
							<a-input placeholder="请输入" v-decorator="[
                  'fixedStartTerm',
                  {
                    rules: [{ required: true, message: '请输入' }]
                  }
                ]" maxLength="30"></a-input>
						</a-form-item>
					</a-col>

					<a-col :span="12">
						<a-form-item class="mb-15" label="第几天结束领取" :label-col="labelCol" :wrapper-col="wrapperCol">
							<a-input placeholder="请输入" v-decorator="[
        	        'fixedEndTerm',
        	        {
        	          rules: [{ required: true, message: '请输入' }]
        	        }
        	      ]" maxLength="30"></a-input>
						</a-form-item>
					</a-col>
				</a-row>
				<!-- <a-row :gutter="[24, 0]"> -->
				<!-- <a-col :span="12">
						<a-form-item class="mb-15" label="第几天开始领取" :label-col="labelCol" :wrapper-col="wrapperCol">
							<div style="display: flex;">
								<a-range-picker @change="onChangeLi" :format="['YYYY-MM-DD','YYYY-MM-DD']" v-decorator="[
                    'li_time', {
                      rules: [{ required: true, message: '请输入', whitespace: true,type:'array' }]
                    }
                  ]" />
							</div>
						</a-form-item>
					</a-col> -->
				<!-- <a-col :span="12">
						<a-form-item class="mb-15" label="限领张数" :label-col="labelCol" :wrapper-col="wrapperCol">
							<div style="display:flex">
								<a-input placeholder="请输入" v-decorator="[
                    'takeLimitCount',
                    {
                      rules: [{ required: true, message: '请输入', whitespace: true }]
                    }
                  ]" maxLength="30"></a-input>
							</div>
						</a-form-item>
					</a-col> -->
				<!-- </a-row> -->
				<a-row :gutter="[24, 0]">
					<!-- <a-col :span="12">
            <a-form-item class="mb-15" label="使用门槛" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-select
                class="flex-1"
                @change="changeSelect"
                placeholder="请选择"
                v-decorator="['usePrice', { rules: [{ required: true, message: '请选择' }] }]"
              >
                <a-select-option :value="1">测试数据 </a-select-option>
              </a-select>
            </a-form-item>
          </a-col> -->
					<!-- <a-col :span="12">
            <a-form-item class="mb-15" label="是否新人优惠券" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-select
                class="flex-1"
                @change="changeSelect"
                placeholder="请选择"
                v-decorator="['couponType', { rules: [{ required: true, message: '请选择' }] }]"
              >
                <a-select-option :value="1">是 </a-select-option>
                <a-select-option :value="2">否</a-select-option>
              </a-select>
            </a-form-item>
          </a-col> -->
				</a-row>

				<a-row :gutter="[24, 0]">
					<!-- <a-col :span="12">
            <a-form-item class="mb-15" label="仅原价购买商品" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-select
                class="flex-1"
                @change="changeSelect"
                placeholder="请选择"
                v-decorator="['couponType', { rules: [{ required: true, message: '请选择' }] }]"
              >
                <a-select-option :value="1">测试数据 </a-select-option>
              </a-select>
            </a-form-item>
          </a-col> -->
					<!--  <a-col :span="12">
            <a-form-item class="mb-15" label="商家选择" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-select
                class="flex-1"
                @change="changeSelect"
                placeholder="请选择"
                v-decorator="['couponType', { rules: [{ required: true, message: '请选择' }] }]"
              >
                <a-select-option :value="1">测试数据 </a-select-option>
              </a-select>
            </a-form-item>
          </a-col> -->
				</a-row>
				<a-row :gutter="[24, 0]">
					<a-col :span="12">
						<a-form-item class="mb-15" label="商品名称" :label-col="labelCol" :wrapper-col="wrapperCol">
							<div style="display:flex">
								<GoodsList ref="goodsList" @choose="choose"></GoodsList>
								<a-input placeholder="请输入" v-decorator="[
                    'productScopeValues',

                  ]" maxLength="30"></a-input>
								<a-button @click="selectGoods(data)" type="primary">
									选择
								</a-button>
							</div>
						</a-form-item>
					</a-col>
					<!-- <a-col :span="12">
            <a-form-item class="mb-15" label="平台限制" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-select
                class="flex-1"
                @change="changeSelect"
                placeholder="请选择"
                v-decorator="['couponType', { rules: [{ required: true, message: '请选择' }] }]"
              >
                <a-select-option :value="1">测试数据 </a-select-option>
              </a-select>
            </a-form-item>
          </a-col> -->
				</a-row>
				<!-- 查看显示 -->
				<!-- <a-row :gutter="[24, 0]">
          <a-col :span="12">
            <a-form-item class="mb-15" label="已发放数量" :label-col="labelCol" :wrapper-col="wrapperCol">
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item class="mb-15" label="剩余总数" :label-col="labelCol" :wrapper-col="wrapperCol">
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="[24, 0]">
          <a-col :span="24">
            <a-form-item class="mb-15" label="适合人群" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">

            </a-form-item>
          </a-col>
        </a-row> -->

				<!-- <div class="mt-20 mb-20">优惠券说明：</div>
        <a-row :gutter="24">
          <a-col :span="24">
            <quill-editor
              class="editor"
              v-model="content"
              ref="myQuillEditor"
              :options="editorOption"
              @blur="onEditorBlur($event)"
              @focus="onEditorFocus($event)"
              @change="onEditorChange($event)"
              @ready="onEditorReady($event)"
            >
            </quill-editor>
          </a-col>
        </a-row> -->
			</a-form>
		</a-spin>
	</a-modal>
</template>
<script>
	import moment from 'moment';
	import {
		quillEditor
	} from 'vue-quill-editor'
	import 'quill/dist/quill.core.css'
	import 'quill/dist/quill.snow.css'
	import 'quill/dist/quill.bubble.css'
	import {
		get
	} from 'lodash'
	import {
		deductionDetail,
		getBanner
	} from '@/api/newPet'
	import {
		couponAdd,
		couponUpdate,
		couponGet
	} from '@/api/baseInfo'
	import GoodsList from '@/components/GoodsList/index.vue'
	export default {
		data() {
			return {
				loading: false,
				isShow: true,
				labelCol: {
					span: 8
				},
				content: '<p>Hello World!</p>',

				editorOption: {
					placeholder: '请输入',
					theme: 'snow',
					modules: {
						toolbar: {
							container: [
								['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
								['blockquote', 'code-block'], // 引用  代码块
								[{
									header: 1
								}, {
									header: 2
								}], // 1、2 级标题
								[{
									list: 'ordered'
								}, {
									list: 'bullet'
								}], // 有序、无序列表
								[{
									script: 'sub'
								}, {
									script: 'super'
								}], // 上标/下标
								[{
									indent: '-1'
								}, {
									indent: '+1'
								}], // 缩进
								// [{ direction: 'rtl' }], // 文本方向
								[{
									size: ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36']
								}], // 字体大小
								[{
									header: [1, 2, 3, 4, 5, 6]
								}], // 标题
								[{
									color: []
								}, {
									background: []
								}], // 字体颜色、字体背景颜色
								// [{ font: ['songti'] }], // 字体种类
								[{
									align: []
								}], // 对齐方式
								['clean'], // 清除文本格式
								['image'] // 链接、图片，需要视频的可以加上video
							]
						}
					}
				},
				data: [{
						name: '规格1',
						img: '',
						num: 1,
						price: 0
					},
					{
						name: '规格1',
						img: '',
						num: 1,
						price: 0
					}
				],
				columns: [{
						title: '规格名称',
						dataIndex: 'name',
						align: 'center',
						width: 140,
						scopedSlots: {
							customRender: 'name'
						}
					},
					{
						title: '规格图片',
						dataIndex: 'img',
						width: 120,
						align: 'center',
						scopedSlots: {
							customRender: 'img'
						}
					},
					{
						title: '规格库存',
						dataIndex: 'num',
						align: 'center',
						width: 70,
						scopedSlots: {
							customRender: 'num'
						}
					},
					{
						title: '规格价格（元）',
						dataIndex: 'price',
						align: 'center',
						width: 70,
						scopedSlots: {
							customRender: 'price'
						}
					},
					// 查看显示
					{
						title: '已售销量',
						dataIndex: 'sales',
						align: 'center',
						width: 90,
						scopedSlots: {
							customRender: 'sales'
						}
					},
					{
						title: '操作',
						fixed: 'right',
						dataIndex: 'action',
						width: 160,
						scopedSlots: {
							customRender: 'action'
						},
						align: 'center'
					}
				],

				wrapperCol: {
					span: 16
				},
				details: {},
				showModal: false,
				titles: '新增',
				info: {},
				form: this.$form.createForm(this),
				dateFormat: 'YYYY-MM-DD',
			}
		},
		computed: {},
		watch: {},
		async created() {},
		components: {
			quillEditor,
			GoodsList
		},
		methods: {
			moment,
			// 选择商品
			selectGoods() {
				this.$refs.goodsList.open()
			},

			choose(data) {
				let sp_v = this.form.getFieldValue('productScopeValues');
				sp_v = sp_v == undefined ? [] : sp_v;
				var index = sp_v.indexOf(data.id);
				//存在就删除
				if (index > -1) {
					sp_v.splice(index, 1);
				} else {
					sp_v.push(data.id)
				}

				this.form.setFieldsValue({
					productScopeValues: sp_v
				})
			},

			onEditorBlur(quill) {
				console.log('editor blur!', quill)
			},
			// 获得焦点事件
			onEditorFocus(quill) {
				console.log('editor focus!', quill)
			},
			// 准备富文本编辑器
			onEditorReady(quill) {
				console.log('editor ready!', quill)
			},
			// 内容改变事件，只需要这一个方法就够了
			onEditorChange({
				quill,
				html,
				text
			}) {
				console.log('editor change!', quill, html, text)
				this.content = html
			},
			formgetFileLength(type) {
				//获取图片
				return get(this.form.getFieldValue(type), 'length') || 0
			},
			formuploadSuccess(data, type) {
				this.form.setFieldsValue({
					images: [...this.form.getFieldValue(type), data.path]
				})
			},
			changeSelect(e) {
				console.log(e)
			},
			onChangediscountType(e) {
				this.form.setFieldsValue({
					discountType: e.target.value
				})
			},
			onChange(e) {
				this.form.setFieldsValue({
					validStartTime: this.$utils.formatTimestamp(e[0]._d),
					validEndTime: this.$utils.formatTimestamp(e[1]._d),
				})
				console.log(this.$utils.formatTimestamp(e[0]._d))
			},
			onChangeLi(e) {
				this.form.setFieldsValue({
					fixedStartTerm: this.$utils.formatTimestamp(e[0]._d),
					fixedEndTerm: this.$utils.formatTimestamp(e[1]._d),
				})
				// console.log(this.$utils.formatTimestamp(e[0]._d))
			},
			cancel() {
				this.form.resetFields()
				this.showModal = false
			},
			confirmOk() {
				this.form.validateFields((err, values) => {
					if (!err) {
						// this.loading = true
						const {
							info
						} = this
						if (values.time) {
							values.validStartTime = this.$utils.formatTimestamp(values.time[0])
							values.validEndTime = this.$utils.formatTimestamp(values.time[1])
						}
						//       if (values.li_time) {
						// 	values.fixedStartTerm = this.$utils.formatTimestamp(values.time[0])
						// 	values.fixedEndTerm = this.$utils.formatTimestamp(values.time[1])
						// }
						let data = {
							id: info && info.id ? info.id : undefined,
							...this.$utils.trimValue(values),
							isEnabled: typeof values.isEnabled === 'undefined' ? true : values.isEnabled,
							validityType: 1,
							takeType: 1,
							productScope: 1,

						}
						data.usePrice = data.discountType == 1 ? values.usePrice : data.discountType == 2 ? values
							.usePrice1 : values.usePrice2
						data.discountPrice = data.discountType == 1 ? values.discountPrice : data.discountType ==
							2 ? '' : values.discountPrice1
						data.discountLimitPrice = data.discountLimitPrice ? data.discountLimitPrice * 100 : ''
						const fun = info && info.id ? couponUpdate : couponAdd
						fun(data)
							.then(() => {
								this.$message.success(info && info.id ? '修改成功！' : '新增成功！')
								this.$emit('upload')
								this.cancel()
							})
							.finally(() => {
								this.loading = false
							})
					}
				})
			},
			getData() {
				this.loading = true
				couponGet({
						id: 1
					})
					.then(data => {
						this.form.setFieldsValue(data)
						this.details = data
					})
					.finally(() => (this.loading = false))
			},
			open(data) {
				this.info = data
				if (data.id) {
					this.titles = '修改'
					this.$nextTick(() => {
						this.form.setFieldsValue({
							isEnabled: true,
							...data,
							time: [this.$utils.formatTimestamp(data.validStartTime), this.$utils
								.formatTimestamp(data.validEndTime)
							],
							usePrice: data.discountType == 1 ? data.usePrice : '',
							discountPrice: data.discountType == 1 ? data.discountPrice : '',
							usePrice1: data.discountType == 2 ? data.usePrice : '',
							usePrice2: data.discountType == 3 ? data.usePrice : '',
							discountPrice1: data.discountType == 3 ? data.discountPrice : '',
							discountLimitPrice: data.discountLimitPrice ? data.discountLimitPrice / 100 :
								''
							// li_time: [this.$utils.formatTimestamp(data.fixedStartTerm),this.$utils.formatTimestamp(data.fixedEndTerm)],
						})
					})
				} else {
					this.titles = '新增'
				}
				this.showModal = true
				// images:['https://img2.baidu.com/it/u=1906732828,3160455141&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666']

				// this.$emit('upload')
				// this.$nextTick(() => {
				//     this.form.setFieldsValue({
				// 					...res
				// 				})

				// 			})
			}
		}
	}
</script>
<style lang="less" scoped>
	.coupon {
		display: flex;
		align-items: center;

		.input {
			width: 100px;
		}
	}

	/deep/.ant-radio-group {
		display: flex;
		flex-direction: column;
	}

	/deep/.ant-radio-wrapper {
		display: flex;
		align-items: center;
		margin-bottom: 30px;
	}
</style>